<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择主题"
    width="940"
    :before-close="handleClose"
  >
    <div class="themeList">
      <div class="themeItem" v-for="(item,index) in themeLists" :key="index">
        <div v-if="index == 0">
          <img src="../assets/images/1.webp" @click="imgClick(index)" />
        </div>
        <div v-if="index == 1">
          <img src="../assets/images/2.webp" @click="imgClick(index)" />
        </div>
        <div v-if="index == 2">
          <img src="../assets/images/3.webp" @click="imgClick(index)" />
        </div>
        <div class="bottom">
          <div class="name">{{ item.name }}</div>
          <el-button size="small" @click="useBtnClick(index)">使用</el-button>
        </div>
      </div>
    </div>
    <div class="preView">
      <div class="themeTitle">{{ themeTitle }}(预览)</div>
      <div class="previewBox" v-html="themeHtml"></div>
      <!-- <v-md-preview-html :html="themeHtml" preview-class="vuepress-markdown-body"></v-md-preview-html> -->
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { themeList } from '../assets/mock/themes';
import { theme1 } from '../assets/theme/1'
import { theme2 } from '../assets/theme/2'
import { theme3 } from '../assets/theme/3'

import { css1 } from '../assets/theme/css1'
import { css2 } from '../assets/theme/css2'
import { css3 } from '../assets/theme/css3'


const dialogVisible = ref(false)
const themeLists = ref(themeList)
const themeHtml = ref('')
const themeTitle = ref('')
const themeIndex = ref(0)

// 定义触发的事件及其数据类型
const emit = defineEmits(['use']);

const getThemeData = (index) =>{
  switch (index) {
    case 0:
      themeHtml.value = theme1.data.writing.html
      themeTitle.value = theme1.data.name
      break;
    case 1:
      themeHtml.value = theme2.data.writing.html
      themeTitle.value = theme2.data.name
      break;
    case 2:
      themeHtml.value = theme3.data.writing.html
      themeTitle.value = theme3.data.name
      break;
    default:
      break;
  }
}

getThemeData(1);

const getAssetURL = (index) => {
  return new URL('../assets/images/' + (index + 1) + '.webp',import.meta.url).href
}

// 图片预览点击事件
const imgClick = (index) =>{
  themeIndex.value = index;
  getThemeData(index);
}

// 使用按钮点击事件
const useBtnClick = (index) =>{
  console.log('useBtnClick = ',index)
  let cssStyle = '';
  switch (index) {
    case 0:
      cssStyle = css1
      break;
    case 1:
      cssStyle = css2
      break;
    case 2:
      cssStyle = css3
      break;
    default:
      break;
  }
  dialogVisible.value = false;
  emit('use', cssStyle,index);
}

// 关闭按钮点击事件
const handleClose = () => {
  dialogVisible.value = false;
}

// 打开弹框按钮点击事件
const show = () => {
  dialogVisible.value = true;
  imgClick(0)
}
// 向外暴露方法
defineExpose({ 
  show
})
</script>

<style lang="less">
.el-dialog__body{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  .preView{
    width: 350px;
    height: 650px;
    .themeTitle{
      height: 40px;
      line-height: 40px;
      border-bottom: solid 1px #ddd;
      padding: 0 12px;
    }
    .previewBox{
      overflow: scroll;
      height: 600px;
      padding: 8px !important;
    }
  }
}
.themeList{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  background: rgb(246, 246, 246);
  .themeItem{
    width: 160px;
    height: 180px;
    margin: 10px;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px;
    border-radius: 12px;
    overflow: hidden;
    &:hover{
      transition: all 0.3s ease 0s;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px;
    }
    img{
      height: 136px;
      width: 160px;
    }
    .bottom{
      height: 44px;
      padding: 0 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      align-items: center;
      color: rgb(38, 38, 38);
    }
  }
}
</style>

